// 使用 Layui 模块
layui.use(function(){
    // 文件上传模块
    var upload = layui.upload;
    // 弹出层模块
    var layer = layui.layer;

    // jquery 模块
    var $ = layui.$;

    // 文件上传 - 图片
    var uploadInst = upload.render({
        // 绑定浏览文件按钮
        elem: '#ID-upload-demo-img',
        // 实现文件上传的服务器程序（Servlet-Part）。
        url: 'upload_head_util.do',
        // 设置文件域 name 属性值，默认值为 file
        field:'head_img',

        // 设置允许上传的文件后缀
        exts: 'jpg|png|jpeg|gif',

        // 设计允许上传文件的大小，单位：KB
        size: 200,

        // 设置不自动上传 - 默认是自动上传
        auto:false ,
        // 绑定提交上传的按钮 - 手动上传
        bindAction: '#btn-ok',
        // 设置上传错误的提示文本
        text:{
            "error": "上传失败"
        },

        // 选择文件时做一些处理 - 切换选择不同的图片
        choose: function(obj){
            // 实现图片的预览，不支持ie8
            obj.preview(function(index, file, result){
                // DOM操作 - result表示的是当前浏览的照片
                $('#ID-upload-demo-img').attr('src', result); // 图片链接（base64）
            });
        },

        // 完成上传之后要做一些事情
        done: function( res ){
            // 若上传失败
            if(res.code > 0){
                return layer.msg('上传失败');
            }

            // 上传成功的一些操作 ... 调用 DAO 修改用户头像
            // 1.获取当前登录用户
            let user = JSON.parse(sessionStorage.getItem("user")) ;
            // 2.获取当前上传头像的图片
            let filename = res.data ;
            // 3.异步请求，实现头像的修改
            $.ajax("update_head.do",{
                data:{
                    user_id:user.id,
                    head_img:filename
                },
                method:'post',
                success:function( res ) {
                    if(res.code == 200) {
                        layer.msg("修改头像成功，重新登录");

                        // 2秒后重新登录 - 目的是为了重新读取新的头像
                        setTimeout(function(){
                            top.location.replace("login.html") ;
                        },2000);

                        return ;
                    }

                    layer.msg("修改头像失败");
                }
            }) ;
        },


        // 上传失败时要做一些事件 - Servlet程序必须响应 code = 0 - ResponseData
        error: function(){
            // 演示失败状态，并实现重传
            var demoText = $('#ID-upload-demo-text');
            demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
            demoText.find('.demo-reload').on('click', function(){
                uploadInst.upload();
            });
        }
    });


    // 页面加载时，读取当前登录用户的头像
    let user = JSON.parse(sessionStorage.getItem("user")) ;
    $("#ID-upload-demo-img").prop("src","images/head/"+user.image) ;
});